<template>
  <SearchBar @search="onSearch" />
  <el-button type="warning" @click="router.push('/itemAdd')">新增商品</el-button>
  <el-table :data="items">
    <el-table-column label="商品名" prop="itemName"></el-table-column>
    <el-table-column label="价格" prop="price">
      <template #default="{ row }">
        <el-tag>{{ row.price }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="描述" prop="desc">
      <template #default="{ row }">
        <el-tooltip effect="dark" placement="bottom">
          <template #content>
            <div style="width: 500px">{{ row.desc }}</div>
          </template>
          <span>{{ row.desc.substring(0, 15) + "..." }}</span>
        </el-tooltip>
      </template>
    </el-table-column>
    <el-table-column label="销量" prop="sale">
      <template #default="{ row }">
        <el-tag :type="row.sale > 500 ? 'danger' : 'info'">{{ row.sale }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="上下架" prop="onsale">
      <template #default="{ row }">
        <el-switch
          v-model="row.onsale"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          :active-value="1"
          :inactive-value="0"
          active-text="上架"
          inactive-text="下架"
          inline-prompt
          @change="switchItemSaleState(row.id, row.onsale)"
        />
      </template>
    </el-table-column>
    <el-table-column label="封面" prop="thumb">
      <template #default="{ row }">
        <el-image
          style="width: 50px; height: 50px"
          :src="row.thumb"
          :zoom-rate="1.2"
          :max-scale="7"
          :min-scale="0.2"
          :preview-src-list="row.pics"
          preview-teleported
          fit="cover"
        />
      </template>
    </el-table-column>
    <el-table-column label="上架时间" prop="createAt"></el-table-column>
    <el-table-column label="操作">
      <template #default="{ row }">
        <el-button type="primary" size="small" @click="enterItemEdit(row.id)"
          >编辑</el-button
        >
        <el-button type="danger" size="small" @click="handleDeleteItem(row.id)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    layout="prev, pager, next, sizes, jumper"
    v-model:current-page="page"
    v-model:page-size="pageSize"
    :total="total"
  />
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { getItemLists, updateItem, delItem } from "@a/item";
import type { Item } from "@/types/item";
import SearchBar from "@/components/SearchBar.vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";

const router = useRouter();

// 列表分页
const page = ref(1);
const pageSize = ref(10);
// 监听当前页 和 页码重新请求列表
watch([page, pageSize], () => {
  getItems();
});
let searchParams = {};
// 搜索事件
const onSearch = (_searchParams: any) => {
  searchParams = _searchParams;
};
const items = ref<Item[]>([]);
const total = ref(0);
const getItems = () => {
  getItemLists({
    ...searchParams,
    page: page.value,
    pageSize: pageSize.value,
  }).then((res: any) => {
    if (res.code === 200) {
      items.value = res.data.items;
      total.value = res.data.total;
    }
  });
};
onMounted(() => {
  getItems();
});

//修改商品上下架状态
const switchItemSaleState = (id: number, onsale: number) => {
  updateItem({
    id,
    onsale,
  }).then((res: any) => {
    if (res.code === 200) {
      ElMessage.success(res.msg);
      searchParams = {};
      page.value = 1;
      pageSize.value = 10;
      getItems();
    } else {
      ElMessage.error(res.msg);
    }
  });
};
// 点击上删除商品
const handleDeleteItem = (id: number) => {
  ElMessageBox.confirm("次操作会彻底删除该商品,继续吗?", "删除商品", {
    type: "warning",
  }).then(() => {
    delItem(id).then((res: any) => {
      if (res.code === 200) {
        ElMessage.success(res.msg);
        searchParams = {};
        page.value = 1;
        pageSize.value = 10;
        getItems();
      } else {
        ElMessage.error(res.msg);
      }
    });
  });
};
// 跳转到修改商品
const enterItemEdit = (id: number) => {
  router.push({
    path: "/itemEdit",
    query: {
      id,
    },
  });
};
defineOptions({
  name: "ItemLists",
});
</script>

<style scoped></style>
